<template>
  <div class="person">
    <!-- <h1>{{ a }}</h1> -->
     <ul>
      <!-- v-for是遍历数组，key是每天数据的唯一标识符，若不指定，则以下标为key
           v-for中的list可以是数组,也可以是遍历次数
           不加：“”里面的全部解析为字符串，则唯一标识符全部相同了,加：则以表达式解析 -->
      <li v-for="item in list" :key="item.id">{{ item.name }}--{{ item.age }}</li>
    </ul>
  </div> 
</template>

<script lang="ts" setup name="Person">
  import { withDefaults } from 'vue';
  import { type persons } from '@/types';

  // 从父组件接收参数a,此时仅仅接收a，不能打印等
  // defineProps(['a'])

  // 接受a,同时将props保存起来
  // let x = defineProps(['a','b','c'])  //利用数组可以接受多个参数，接收不存在的则为undefined
  // console.log(x);  //Proxy(Object) {a: '哈哈', b: '嘿嘿', c: undefined}

  // 只接收数据
  // defineProps(['a','b','list']) 

  // 接收list+限制类型
  // defineProps<{list:persons}>()   //接受的数据必须是list,且必须符合persons的规范

  // 接收list+限制类型+限制必要性+指定默认值
  // 加?,则可传可不传
  // 利用withDefaults加默认值,但默认值不能直接给list,必须是一个函数的返回值
  withDefaults(defineProps<{list?:persons}>(),{
    list:()=>[{id:'23456',name:'hjn',age:18}]
  })

  // 接受a,同时将props保存起来
  // let x = defineProps(['a','b','list'])
  
  // defineProps,defineExpose是宏函数,可以不用引入,直接使用
  

</script>

<style>
  .person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
  button{
    margin: 0 5px;
  }
  ul li{
    font-size: 20px;
  }
</style>